<template>
  <div :class="{ 'w375': fun.isPc() }">
    <c-title text="商品详情"></c-title>
    <img :src="couponPackDetail.headUrl" style="width: 100%;" />
    <div class="content">
      <div class="coupon-detail">
        <div class="sell-price">
          <span class="fz-24">{{ $i18n.t('money') }}</span>{{ couponPackDetail.sellPrice }} <div class="original-price">
            {{
              $i18n.t('money') }}{{ couponPackDetail.originalPrice }}</div>
        </div>
        <div class="sale-value">{{ utils_text }}</div>

      </div>
      <div class="time" v-if="couponPackDetail.startTime">
        <i class="iconfont icon-icon_time1"></i>
        <span>有效期：{{ start_time }}-{{ end_time }}</span>
      </div>
      <div class="content-title">{{ couponPackDetail.name }}</div>



      <!-- <div class="wrap">
        <div class="nav">
          <img style="width: 100%;height: 100%;"
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image%2Fpreferential_bg.png" />
          <div class="ttt">
            <div class="preferential">券后价格</div>
            <div class="nav-bottom">
              <span class="fz-20" style="align-self: flex-end;margin-right:0.1563rem;">{{ $i18n.t('money') }}</span>
              <span class="fz-41 bold" style="line-height: 1;">{{ dealBaseInfo && dealBaseInfo.finalPrice }}</span>
              <span class="discount" v-if="dealBaseInfo && dealBaseInfo.discount">{{ dealBaseInfo && dealBaseInfo.discount
              }}</span>
            </div>
          </div>
        </div>
        <div class="wrap-right">
          <div>
            <div>美团价</div>
            <div class="bold">{{ $i18n.t('money') }}{{ dealBaseInfo && dealBaseInfo.realPrice ?
              (dealBaseInfo.realPrice).toFixed(2) : 0 }}
            </div>
          </div>
          <template v-if="dealBaseInfo && dealBaseInfo.couponPrice > 0">
            <div class="wrap-line"></div>
            <div>
              <div>其他立减</div>
              <div class="bold">{{ $i18n.t('money') }}{{ dealBaseInfo && dealBaseInfo.couponPrice ?
                (dealBaseInfo.couponPrice).toFixed(2)
                : 0
              }}</div>
            </div>
          </template>
</div>
</div>

<div class="original-price">门市价<span style="text-decoration: line-through;">{{ $i18n.t('money') }}{{
    dealBaseInfo && dealBaseInfo.marketPrice }}</span></div> -->
    </div>


    <div class="bank-info" v-if="brandInfo.brandName||brandInfo.brandLogoUrl">
      <img :src="brandInfo.brandLogoUrl" alt="" style="margin: 0 .75rem 0 0;width: 2.5rem;height: 2.5rem;border-radius: 50%;">
      <div>{{brandInfo.brandName}}</div>
    </div>



    <!-- <div class="reason" v-if="dealBaseInfo && dealBaseInfo.description">
      <div class="recommend-reason">推荐理由</div>
      <div>{{ dealBaseInfo && dealBaseInfo.description }}</div>
    </div> -->
    <div class="reward" v-if="reward && reward.length !== 0">
      <div class="reward-title">
        <span class="reward-tips">奖励信息&nbsp;</span>
        <span class="reward-title-right">(预估奖励，实际奖励以最终返回结果为准)</span>
        <img :src="imgHost + '/static/local/tiktok-group-buy/jiangli.png'" alt="">
      </div>
      <div class="reward-content">
        <div class="flex-center mb-24" v-for="item in reward">
          <span class="reward-content-left">{{ item.reward_type }}</span><span>{{ item.value }}</span>
        </div>
      </div>
    </div>
    <!--群活码-->
    <div class="group-code" v-if="group_code && group_code.goods_entrance == 1">
      <div class="group-code-face" v-if="group_code.code_logo">
        <img :src="group_code.code_logo" />
      </div>
      <div class="group-code-content">
        <div class="group-code-name">{{ group_code.code_title }}邀请您添加专属福利群！</div>
        <div class="group-code-desc">{{ group_code.citation_copy }}</div>
      </div>
      <div class="group-code-button" @click="toGroupCode">去加群</div>
    </div>

    <!-- 门店 -->
    <template v-if="show_stroe">
      <div class="store-title">使用门店</div>
      <div class="store-box">
        <div class="store-box-left">
          <img :src="deliverablePoiInfo.poiLogoUrl" alt="">
        </div>
        <div class="store-box-right">
          <div class="store-name">{{ deliverablePoiInfo.poiName }}</div>
          <div class="store-address">
            <div class="center" @click="goToWXAdress">
              <span>{{ deliverablePoiInfo.deliveryDistance }}</span>
              <i class="iconfont icon-all_daohang"></i>
            </div>
          </div>
        </div>
      </div>

    </template>
    <!-- <div v-else class="no-store">
      <van-cell title="请先选择城市" is-link title-style="text-align:left;" @click="goto" />
    </div> -->

    <div style="height:4.0625rem"></div>
    <div class="foot" :class="{ 'foot-w375': fun.isPc() }">
      <van-goods-action-icon icon="shop-o" text="首页" @click="gotoHome" />
      <van-goods-action-icon icon="chat-o" text="客服" @click="clickChat" />
      <button class="share-money" @click="share_flag = true">
        <!-- <template v-if="share_reward.reward_type == 'commission'">
          <template v-if="(share_reward.amount * 1)>0">分享赚{{ $i18n.t('money') }}{{ share_reward.amount }}</template>
          <template v-else>分享</template>
        </template> -->
        <!-- <template v-else> -->
        <!-- <template v-if="(share_reward.amount * 1) >0">分享赚{{ share_reward.amount }}{{ share_reward.name }}</template> -->
        <template>分享</template>
        <!-- </template> -->
      </button>
      <button class="buy" @click="buy">
        <!-- <template v-if="order_reward.reward_type == 'balance'">
          <template v-if="(order_reward.amount *1) >0">下单送{{ $i18n.t('money') }}{{ order_reward.amount }}</template>
          <template v-else>下单</template>
        </template>
        <template v-else> -->
        <!-- <template v-if=" (order_reward.amount *1) >0">下单送{{ order_reward.amount }}{{ order_reward.name }}</template> -->
        <template>下单</template>
        <!-- </template> -->
      </button>
    </div>
    <div style="width: 375px; top: 450px; position: fixed;">
      <div class="poster" @click="postShow">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/bc_eweima.png" alt />
      </div>
    </div>

    <van-popup v-model="share_flag" round position="bottom">
      <div class="share-box">
        <div class="share-tips">
          <span style="font-size: 1rem;font-weight: bold;
                    color: #00001C;">分享商品</span>
          <van-icon name="cross" @click="share_flag = false" />
        </div>
        <div class="share-post">
          <div class="share-txt">分享海报</div>
          <div style="text-align: center;"></div>
          <div class="share-button" style="margin: 0 auto;" @click="postShow">生成海报</div>
        </div>
        <div class="share-copy-box">
          <div class="flex-center between share-copy-box-head">
            <div class="share-txt" style="margin-bottom: 0;">分享文案</div>
            <div class="share-button" v-clipboard:copy="radio == 1 ? text_href : group_buy_code"
              v-clipboard:success="onCopy">
              复制文案</div>
          </div>
          <div style="padding:0 0.75rem 0.75rem;">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1" checked-color="#F15353">详情地址</van-radio>
              <van-radio name="2" checked-color="#F15353">团口令</van-radio>
            </van-radio-group>
            <div class="share-tips-txt" v-if="radio == 2">直接复制团口令分享，您的好友购买后奖励将归您所有，复制您口令购买团购的用户无奖励；也无法锁客！
            </div>
          </div>
          <div class="customer-popup-content" style="margin-bottom:0;">
            <template v-if="radio == '2'">
              <p class="popup-tips-txt">
                {{ group_buy_code }}
              </p>
            </template>
            <template v-else>
              <p class="popup-tips-txt" style="padding-left: .4688rem;">{{ couponPackDetail.name }}</p>
              <p class="popup-tips-txt">【现价】{{ couponPackDetail.sellPrice }}元</p>
              <p class="popup-tips-txt">【原价】{{ couponPackDetail.originalPrice }}元</p>
              <p class="popup-tips-txt">【有效期】{{ start_time }}-{{ end_time }}</p>
              <div class="popup-tips-txt">【下单链接】</div>
              <div class="popup-tips-txt" style="padding-left: .625rem;">{{ href }}</div>
            </template>

          </div>

        </div>
        <div class="share-bottom">
          <div class="share-round">1</div><span class="color-6E6E79 fz-24">生成海报</span>
          <div class="line-box"><span></span><span></span><span></span></div>
          <div class="share-round">2</div><span class="color-6E6E79 fz-24">保存海报到手机相册</span>
          <div class="line-box"><span></span><span></span><span></span></div>
          <div class="share-round">3</div><span class="color-6E6E79 fz-24">复制文案</span><br />
        </div>
        <div class="color-6E6E79 fz-24" style="text-align: center;">可分享到朋友圈、群、好友等场景！</div>
      </div>
    </van-popup>

    <!-- 海报 -->
    <yz-goodsposter v-model="posterShow" :posterData="isFrontCanvas ? posterImg : {}"
      :defaultImg="!isFrontCanvas ? posterImg : ''" plugin_name="meituan" :goodstype="true"></yz-goodsposter>
    <!-- 客服 -->
    <cservice-popup :show="isShowChat" :cservice="cservice" :service_mobile="service_mobile"
      :service_QRcode="service_QRcode" @close="isShowChat = false"></cservice-popup>

  </div>
</template>

<script>

import yzGoodsposter from "components/ui_components/yz_goodsPoster";
import cservicePopup from "components/goods/children/plugin/cservicePopup";
import { Toast } from "vant";
export default {
  components: { cservicePopup, yzGoodsposter },
  data() {
    return {
      group_buy_code: "",
      start_time: '',
      radio: "1",
      share_flag: false,
      end_time: '',
      utils_text: "",

      discount: "",
      href:window.location.href,
      group_code: {},
      dealBaseInfo: {},
      couponInfo: {},
      shopInfo: {},
      imgHost: window.location.origin,

      brandInfo:{
          brandName:"",
      },

      posterShow: false,
      isFrontCanvas: true, //是否前端控制生成海报，false为后端生成
      posterImg: null,
      page: 1,
      current_index: 0,

      detail: {},
      latitude: 0,
      longitude: 0,
      address: "",

      service_QRcode: "",
      service_mobile: "",
      cservice: "",
      isShowChat: false,

      cate_id: "",//一级分类id
      dealid: "",

      city_name: "",
      city_id: "",
      point: {},
      order_reward: {},
      share_reward: {},
      link: "",
      couponPackDetail: {},
      deliverablePoiInfo: {},
      show_stroe: false,
      reward: {},

    };
  },
  activated() {
    this.init();


  },
  methods: {
    onCopy() {
      this.$toast('复制成功')
    },
    format_time(str) {
      if (str) {
        let _str = (str + '').length < 13 ? (str + '' + '000') : str;
        let date = new Date(_str * 1);
        let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
        let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
        return `${date.getFullYear()}.${month}.${day}`;
      }

      return ''
    },
    get_generate_link() {
      let json = {
        sku_view_id: this.$route.params.id,
        ids: this.$route.params.ids
      }
      $http.get("plugin.meituan-group-buy.frontend.good.generate-link", json, '').then(({ msg, data, result }) => {
        if (result !== 1) {
          this.$toast(msg);
        }
        this.link = data.link || '';
        this.group_buy_code = data.group_buy_code || '';
      })
    },
    get_city_id(name) {
      $http.post('plugin.meituan-group-buy.frontend.good.city', { name }, '').then(res => {
        if (res.result !== 1) {
          return this.$toast(res.msg);
        }
        let datas = res.data;
        let city_id;
        for (let item in datas) {
          city_id = datas[item][0].id;
        }
        this.city_id = city_id;

        window.localStorage.setItem('meituan_city_id', city_id)
        this.getData();
      })
    },
    goto() {
      this.$router.push(this.fun.getUrl("citypickerPage", {}, { plu: "meituan", path: "detail" }))
    },
    init() {
      this.share_flag = false;
      this.show_stroe = false;
      let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      if (myLoaction) {
        this.point = myLoaction.point;
      }
      // else {
      //   this.fun
      //     .getLocation()
      //     .then((res) => {
      //       this.point = res.point;
      //       this.getData();
      //     })
      //     .catch(err => {
      //       console.log(err);
      //       this.getData();
      //     });
      // }
      this.getData();
      this.get_generate_link();


      // this.city_name = "";
      // let myLoaction = JSON.parse(localStorage.getItem('myLocation'));
      // if (this.$route.query.cate_id) {
      //   this.cate_id = this.$route.query.cate_id;
      //   if (this.$route.query.cate_idy) {
      //     localStorage.setItem('meituanCategory', JSON.stringify({ "cate_id": this.$route.query.cate_id }));
      //   }
      // } else {
      //   let meituanCategory = JSON.parse(localStorage.getItem('meituanCategory'));
      //   this.cate_id = meituanCategory.cate_id;
      // }
      // if (this.$route.query.dealid) {
      //   this.dealid = this.$route.query.dealid;
      //   if (this.$route.query.dealid) {
      //     localStorage.setItem('meituan_dealid', JSON.stringify({ "dealid": this.$route.query.dealid }));
      //   }
      // } else {
      //   let meituan_dealid = JSON.parse(localStorage.getItem('meituan_dealid'));
      //   this.dealid = meituan_dealid.dealid;
      // }
      // if (this.$route.query.city) {
      //   this.city_name = this.$route.query.city;
      // }
      // if (this.$route.query.lng&&this.$route.query.lat) {
      //   this.point.lng = this.$route.query.lng;
      //   this.point.lat = this.$route.query.lat;
      // }else if(myLoaction){
      //   this.point = myLoaction.point;
      //   this.city_name = myLoaction.city;
      // }
    },
    getData() {
      console.log(this.point, 'this.point===');
      let json = {
        sku_view_id: this.$route.params.id,
        ids: this.$route.params.ids
      }
      if (this.point && (this.point.lat * 1) > 0 && (this.point.lng * 1) > 0) {
        json.latitude = this.point.lat * 1;
        json.longitude = this.point.lng * 1;
      }

      $http.get("plugin.meituan-group-buy.frontend.good.good", json, "").then(({ result, msg, data }) => {
        if (result !== 1) {
          return this.$toast(msg);
        }
        let { cservice, group_code } = data.good_detail;
        let couponPackDetail = data.data[0].couponPackDetail || {};
        this.reward = data.data[0].reward || [];
        this.couponPackDetail = couponPackDetail;
        let deliverablePoiInfo = data.data[0].deliverablePoiInfo || {};
        this.order_reward = data.data[0].order_reward;
        this.share_reward = data.data[0].share_reward;
        this.brandInfo = data.data[0].brandInfo;
        for (const key in deliverablePoiInfo) {
          if (deliverablePoiInfo[key]) {
            this.show_stroe = true;
          }
        }
        this.deliverablePoiInfo = deliverablePoiInfo;
        if (cservice) {
          this.service_QRcode = cservice.service_QRcode;
          this.service_mobile = cservice.service_mobile;
          this.cservice = cservice.cservice;
        }

        this.group_code = group_code || {};
        if (couponPackDetail && couponPackDetail.saleVolume.indexOf('热销') >= 0) {
          this.utils_text = couponPackDetail.saleVolume;
        } else {
          this.utils_text = '已售' + couponPackDetail.saleVolume;
        }

        this.start_time = this.format_time(couponPackDetail.startTime);
        this.end_time = this.format_time(couponPackDetail.endTime);
        
        this.text_href  = 
        `${couponPackDetail.name}\n【现价】${couponPackDetail.sellPrice }元\n【原价】${couponPackDetail.originalPrice}元\n【有效期】${this.format_time(couponPackDetail.startTime)}-${this.format_time(couponPackDetail.endTime)}\n【下单链接】\n${this.href}
        `

      })
    },

    buy() {
      window.open(this.link, "_blank")
    },
    postShow() {
      if (!this.fun.isTextEmpty(this.posterImg)) {
        this.posterShow = true;
      } else {
        let toastPoster = Toast({
          duration: -1, // 持续展示 toast
          message: "正在为您生成海报中"
        });
        let url = "";
        let Jons = {};
        this.isFrontCanvas = false;
        this.isFrontCanvas = true;
        url = "plugin.meituan-group-buy.frontend.poster.get-poster";

        Jons.id = this.$route.params.id;
        Jons.ids = this.$route.params.ids;
        $http
          .get(url, Jons, "")
          .then(response => {
            toastPoster.clear();
            if (response.result == 1) {
              // isFrontCanvas 是否需要前端生成海报
              this.posterImg = this.isFrontCanvas ? response.data : `${response.data.image_url}?${Date.now()}`;
              this.posterShow = true;
            } else {
              this.posterShow = false;
              this.$dialog.alert({ message: response.msg });
            }
          })
          .catch(error => {
            toastPoster.clear();
            console.log(error);
          });
      }
    },

    clickChat() {
      let setServicePlugin = this.fun.isTextEmpty(this.service_mobile) && this.fun.isTextEmpty(this.service_QRcode);
      if (this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        return this.$toast("抱歉，暂未设置客服信息");
      }
      if (!this.fun.isTextEmpty(this.cservice) && setServicePlugin) {
        //只设置了客服链接，直接跳转
        if (this.cservice && this.cservice.indexOf("chatWindow") >= 0) {
          window.location.href = this.cservice + "&goods_id=" + this.goods_id;
        } else {
          window.location.href = this.cservice;
        }
        return;
      }
      this.isShowChat = true;

    },
    gotoHome() {
      this.$router.push(this.fun.getUrl('meituan_refund'))
    },
    // 群活码跳转
    toGroupCode() {
      if (this.group_code.jump_mode === "home") {
        this.$router.push(this.fun.getUrl("groupCode"));
      } else if (this.group_code.code_url) {
        window.location.href = this.group_code.code_url;
      }
    },
    goToWXAdress() {
      let point = {
        lat: this.point.lat * 1,
        lng: this.point.lng * 1
      }
      this.fun.goToWXAdress(point, this.deliverablePoiInfo.poiName)
    },
  }
};
</script>

<style scoped lang="scss">
.share-box {
  padding: 1.5rem .75rem 2.25rem;
  box-sizing: border-box;
  background-color: #F5F5F5;
  height: 100%;

  .share-tips-txt {
    font-weight: 400;
    font-size: 0.75rem;
    color: #F15353;
    line-height: 1rem;
    text-align: left;
    margin-top: .75rem;
  }

  .customer-popup-content {
    overflow-y: scroll;
    border: 1px solid var(--themeBaseColor);
    margin: 0 .75rem .625rem;
    border-radius: 0.5rem;
    word-wrap: break-word;
  }

  .line-box {
    width: 0.9375rem;
    margin: 0 .25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      width: 0.25rem;
      height: 1px;
      background-color: #AAAAB3;
    }
  }

  .popup-tips-txt {
    margin: .375rem 0.625rem;
    text-align: left;
    font-size: 0.8125rem;
    color: #00001C;
  }

  .share-tips {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
    padding: 0 .1875rem .9375rem;
  }

  .mt-24 {
    margin-top: .75rem;
  }

  .share-post {
    // height: 9.5938rem;
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: .9375rem .625rem .75rem;
  }

  .share-bottom {
    display: flex;
    flex-wrap: wrap;
    padding: 0 .875rem;
  }

  .share-round {
    width: 1.25rem;
    border-radius: 50%;
    height: 1.25rem;
    margin-right: .1875rem;
    border: 1px solid #999999;
    font-size: .75rem;
  }

  .between {
    justify-content: space-between;
  }

  .share-copy-box-head {
    padding: .75rem .625rem .125rem .75rem;
  }

  .share-copy-box {
    margin: .625rem 0;
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding-bottom: .75rem;
  }

  .share-button {
    width: 4.625rem;
    height: 1.75rem;
    line-height: 1.75rem;
    text-align: center;
    background: var(--themeBaseColor);
    border-radius: .4688rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #FFFFFF;
  }

  .share-txt {
    font-weight: bold;
    font-size: 0.9375rem;
    color: #00001C;
    text-align: left;
    line-height: 1;
    margin-bottom: .4688rem;
  }

  .share-txt-tips {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6E6E79;
    line-height: 1;
    text-align: left;
  }
}

.bank-info {
  margin: .75rem .625rem;
  border-radius: .5rem;
  padding: 0.75rem;
  background-color: #fff;
  display: flex;
  align-items: center;
}

.icon-info_store {
  margin-right: .75rem;
}

.coupon-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sale-value {
  font-weight: 400;
  font-size: 0.8125rem;
  color: #999999;
}

.flex-center {
  display: flex;
  align-items: center;
}

.time {
  background-color: #FEF4F4;
  margin-top: 0.5625rem;
  border-radius: 0.625rem;
  overflow: hidden;
  margin-bottom: 0.6875rem;
  height: 2rem;
  display: flex;
  align-items: center;

  span {
    color: #F15353;
    font-size: 0.875rem;
    margin-left: 0.3438rem;
  }

  .icon-icon_time1 {
    display: block;
    width: 2.0938rem;
    height: 2rem;
    background: #F15353;
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 1.5rem;
    border: 0.0313rem solid #FFFFFF;
  }
}

.mb-24 {
  margin-bottom: .75rem;
}

.reward {
  margin: .625rem .75rem;
  background: linear-gradient(180deg, #FFEAC8 0%, #FFFFFF 100%);
  border-radius: 0.75rem;
  border: 1px solid #FFFFFF;

  &-content {
    border-radius: 0.5rem;
    background: #FFFFFF;
    padding: .75rem .375rem .9375rem;
    box-sizing: border-box;
    line-height: 1;
    margin: 0 .3125rem 0;
  }

  &-content-left {
    min-width: 3.25rem;
    margin-right: .7188rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #00001C;
    text-align: left;
  }

  .reward-title {
    display: flex;
    align-items: center;
    height: 2.75rem;
    margin-left: 0.875rem;
    position: relative;
    font-size: .9375rem;

    img {
      position: absolute;
      top: 0;
      right: .75rem;
      width: 1.8438rem;
    }

    &-right {
      font-weight: 400;
      font-size: 0.75rem;
      color: #672000;
      line-height: 1;
    }
  }

  .reward-tips {
    font-weight: bold;
    font-size: 0.9375rem;
    color: #672000;
    line-height: 1;
    margin-right: .0938rem;
  }
}

.original-price {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-weight: 400;
  font-size: 0.6875rem;
  color: #AAAAB3;
  margin-top: 0.3438rem;
  text-decoration: line-through;
  margin-left: 0.3125rem;

}

.sell-price {
  display: flex;
  align-items: baseline;
  line-height: 1;
  font-weight: bold;
  color: #F15353;
  font-size: 1.125rem;
}

.poster {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 20.4rem;
  top: 65%;

  img {
    width: 100%;
    height: 100%;
  }
}

.recommend-reason {
  text-align: center;
  font-weight: bold;
  font-size: 0.9375rem;
  margin-bottom: 0.9063rem;
  height: 0.9375rem;
  line-height: 0.9375rem;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-ht_operation_copyline,
.icon-jk_haibao {
  width: 2.7188rem;
  height: 2.7188rem;
  line-height: 2.7188rem;
  color: #fff;
  background: #E7AA45;
  border-radius: 3.125rem;

}

.share-popup-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.close {
  position: absolute;
  right: 5%;
  top: 5%;
}

.overlay-detail {
  display: flex;

}

.overlay-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .link-content {
    margin-top: 1.0625rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    word-break: break-all;
    text-align: left;
    color: #999;
    font-size: 0.75rem;
  }
}

.overlay-block {
  position: relative;
  width: 17.5rem;
  border-radius: 0.25rem;
  background-color: #fff;
  padding: 1.25rem 0.625rem;

}

.foot-w375 {
  width: 375px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.foot {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 3.0625rem;
  background-color: #fff;
  padding: 0.2813rem 0.625rem;
  display: flex;
  align-items: center;
}

.buy {
  min-width: 8rem;
  background-color: #F15353;
  color: #fff;
  font-size: 0.9375rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: 0rem 1.25rem 1.25rem 0rem;
  border: unset;
}

.share-money {
  min-width: 8rem;
  background-color: #F58686;
  color: #fff;
  font-size: 0.9375rem;
  height: 2.5rem;
  line-height: 2.5rem;
  text-align: center;
  border-radius: 1.25rem 0rem 0rem 1.25rem;
  border: unset;
}

.store-title {
  text-align: center;
  margin-bottom: 0.9063rem;
  margin-top: 1.0313rem;
  font-weight: bold;
  font-size: 0.9375rem;
}

.center {
  display: flex;
  align-items: center;
}

.no-store {
  background-color: #fff;
  border-radius: 0.625rem;
  overflow: hidden;
  margin: 0.625rem 0.75rem;
}

.store-box {
  background-color: #fff;
  border-radius: 0.5rem;
  margin: 0.625rem 0.75rem;
  padding: 0.75rem;
  display: flex;

  .icon-all_daohang {
    font-size: 1.25rem;
    color: #F15353;
    margin-left: 0.3125rem;
  }

  .store-address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8125rem;
    margin-top: 0.3125rem;
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  .store-box-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .store-type {
    color: #F96D20;
    border-radius: 0.3125rem;
    font-size: 0.75rem;
    padding: 0.1875rem 0.3438rem;
    margin-right: 0.375rem;
    margin-top: 0.375rem;
    box-sizing: border-box;
    background-color: #FFF0E8;
  }

  .store-name {
    flex: 1;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: bold;
  }

  .store-box-left {
    width: 4.375rem;
    height: auto;
    margin-right: 0.5rem;
    flex-shrink: 0;

    img {
      width: 100%;
      // height: 100%;
      border-radius: 0.625rem;
    }
  }

}

/* 群活码 */
.group-code {
  display: flex;
  align-items: center;
  text-align: left;
  background-color: #fff;
  padding: 0.6rem;
  border-radius: 0.3125rem;
  margin: 0.6rem;

  .group-code-face {
    width: 2.5rem;
    height: 2.5rem;

    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
    }
  }

  .group-code-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 2rem;
    padding-right: 1rem;
    padding-left: 0.5rem;
    line-height: 1.125rem;

    .group-code-name {
      font-size: 0.9375rem;
      font-weight: 500;
      color: #00001C;
    }

    .group-code-desc {
      font-size: 0.8125rem;
      color: #6E6E79;
    }
  }

  .group-code-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 1.5rem;
    line-height: 1.5rem;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    background-color: #ff9600;
    border-radius: 0.75rem;
  }
}

.content {
  margin: 0.625rem 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: #fff;

  .original-price {
    margin-top: 0.625rem;
    text-align: left;
    color: #AAAAB3;
    font-size: 0.6875rem;
  }

  .content-title {
    font-size: 1rem;
    font-weight: bold;
    color: #00001C;
    margin-bottom: 0.75rem;
    text-align: left;
    margin-top: .625rem;
  }

  .wrap {
    display: flex;
    width: 100%;
    height: 3rem;
    background: #FFF5F5;
    border-radius: 0.75rem;
  }

  .wrap-right {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 60%;
    font-size: 0.8125rem;
    color: #F15353;
  }

  .wrap-line {
    width: 0.625rem;
    height: 0.0938rem;
    background-color: #F15353;
  }

  .nav {
    width: 40%;
    height: 100%;
    position: relative;
    // background-image:url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image%2Fpreferential_bg.png") no-repeat center ;
  }

  .fz-24 {
    font-size: 0.75rem;
  }

  .fz-20 {
    font-size: 0.625rem;
  }

  .c-fff {
    color: #fff;
  }

  .left {
    text-align: left;
  }

  .nav-bottom {
    display: flex;
    align-items: center;
    margin-top: .3rem;
    color: #fff;
    z-index: 6;
    position: relative;
  }

  .preferential {
    position: relative;
    color: #fff;
    font-size: 0.75rem;
    text-align: left;
    line-height: 1;
    z-index: 5;
  }

  .ttt {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    font-size: 0.75rem;
    padding: 0.3rem 1rem 0;
    z-index: 10;
    box-sizing: border-box;


  }

  // .ttt-bg {
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   z-index: -1;
  //   background-color: #F15353;
  //   border-bottom: none;
  //   border-radius: 10px 13px 0 10px;
  //   transform: perspective(70px) rotateX(5deg);
  //   transform-origin: left;
  //   box-sizing:border-box;
  // }

  // .ttt::before {
  //   content: "";
  //   position: absolute;
  //   top: 0;
  //   right: 0;
  //   bottom: 0;
  //   left: 0;
  //   z-index: -1;
  //   background-color: #F15353;
  //   border-bottom: none;
  //   border-radius: 10px 13px 0 10px;
  //   transform: perspective(70px) rotateX(5deg);
  //   transform-origin: left;
  // }

  .fz-41 {
    font-size: 1.3rem;
  }

  .bold {
    font-weight: bold;
  }

  .discount {
    font-size: 10px;
    border: 1px solid #fff;
    padding: 0 0.2188rem;
    box-sizing: border-box;
    border-radius: 0.25rem;
    margin-left: 0.1875rem;
    height: 0.8125rem;
    line-height: 0.8125rem;
  }
}

.reason {
  background: #FFFFFF;
  border-radius: 0.5rem;
  margin: 0.625rem 0.75rem;
  padding: 1.0625rem 0.75rem;
}
</style>
